<template>
  <div class="container">
    <div class="window">
      <div class="topology">
        <ul class="topologyList">
          <li
            v-for="(item,idx) of deviceList"
            @click="toDetail(idx)"
            :key="idx"
            class="window"
            :style="{backgroundImage: (item.hasNoHandleException ? `url(${require('@/assets/img/topoitembg2.png')})` : `url(${require('@/assets/img/topoitembg1.png')})`)}">
            <div class="getwayQuantity">
              <span>边缘计算网关 X</span>
              <span class="quantity">{{ item.count }}</span>
            </div>
            <div class="pickupQuantity">
              <span>骨传导传感器 X</span>
              <span class="quantity">{{ item.channel&&item.channel.length }}</span>
            </div>
            <div class="detial">
              <div class="icon1">
                <img src="~@/assets/img/gjdwlogo.jpg" alt="">
              </div>
              <div class="icon2">
                <img :src="fileUrl+deviceList[idx].deviceFileName" alt="">
              </div>
              <div class="icon3">
                <img :src="gatewayImgUrlArr[idx]" alt="">
              </div>
            </div>
            <span class="stationAddress">{{ item.deviceName }}</span>
          </li>
          <!-- // 占位元素 -->
          <!--          <li class="window temp" v-show="false" v-for="i in (Object.keys(deviceList).length%3)" :key="i"></li>-->
        </ul>
      </div>
      <!-- 图表窗口 -->
      <div class="charts">
        <div class="stationStatistics">
          <div class="title">站点统计</div>
          <div class="detail">
            <div class="quantity">
              <div class="station">
                <p class="num">{{ gatewayCount }}</p>
                <p class="name">网关数量</p>
              </div>
              <div class="transformer">
                <p class="num">{{ channelCount }}</p>
                <p class="name">传感器数量</p>
              </div>
            </div>
            <!-- 饼图 -->
            <div class="error" id="errorProportion"></div>
            <!-- 占比值 -->
            <div class="circle">
              <div class="errorNum">
                <p class="text">故障率</p>
                <span class="num">{{ faultRate }}</span>
                <span>%</span>
              </div>
            </div>
          </div>
        </div>
        <div class="errorStatistics">
          <div class="title">月度异常统计</div>
          <!-- 故障统计折线图 -->
          <div class="line"></div>
        </div>
        <div class="errorRank">
          <div class="title">异常排名</div>
          <div class="error" id="errorRank"></div>
          <div class="rank">
            <div class="rank1">
              <div class="errorName">#{{ this.exceptionGroupX.length>0?this.exceptionGroupX[0]:'' }}</div>
              <div class="errorDetail">
                <p class="mun">{{ this.exceptionGroupY.length>0?this.exceptionGroupY[0]:'' }}</p>
                <p>故障数量</p>
              </div>
            </div>
            <div class="rank2" v-if="this.exceptionGroupY.length>1">
              <div class="errorName">#{{ this.exceptionGroupX.length>1?this.exceptionGroupX[1]:'' }}</div>
              <div class="errorDetail">
                <p class="mun">{{ this.exceptionGroupY.length>1?this.exceptionGroupY[1]:'' }}</p>
                <p>故障数量</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { list } from '@/api/modular/main/bizstation/bizStationManage'
  import {
    getAllListById,
    getExceptionStatus,
    getTypeCount,
    getErrorCountByMonth,
    getChannelCount,
    getExceptionCountByStationId,
    getFaultRate
  } from '@/api/modular/system/indexManage'
  import * as echarts from 'echarts'
  // import { deviceList } from '@/api/modular/main/bizdevice/bizDeviceManage'
  import { gatewayList } from '@/api/modular/main/bizgateway/bizGatewayManage'

  // const myChart
  let myPie
  let myLine
  let myHis

  export default {
    data: function () {
      return {
        stationList: [],
        stationId: 0,
        deviceList: {},
        checkNum: 0,
        stationAddress: '',
        gatewayCount: 0,
        channelCount: 0,
        unprocessed: 0,
        processed: 0,
        faultRate: 0,
        typeCount: {},
        exceptionGroupX: [],
        exceptionGroupY: [],
        fileUrl: window.CONST.VUE_APP_API_BASE_FILE_URL,
        allMonthErrorList: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        gatewayImgUrlArr: {}
      }
    },
    created () {
      this.stationId = this.$route.query.stationId
      getAllListById({ stationId: this.stationId }).then((res) => {
        this.deviceList = res.device
        const len = Object.keys(this.deviceList).length
        if (len > 0) {
          try {
            for (const key in this.deviceList) {
              if (this.deviceList[key].gateway && this.deviceList[key].gateway.length > 0) {
                this.gatewayImgUrlArr[key] = require('@/assets/devices/' + this.deviceList[key].gateway[0].typeCode + '.png')
              } else {
                this.gatewayImgUrlArr[key] = ''
              }
            }
          } catch (e) {
            console.log(e)
          }
        }
        this.stationAddress = res.stationAddress
        this.getDeviceList()
      })
    },
    methods: {
      index () {
        list().then((res) => {
          this.stationList = res.data
          const index = this.$route.query.index
          if (index) {
            this.checkNum = index
          }
          this.checkNum = index
        })
      },
      toDetail (idx) {
        this.$router.push({
          path: '/detail', query: { stationId: this.stationId, id: idx }
        })
      },
      getStatusCount () {
        getExceptionStatus().then(res => {
          this.unprocessed = res.unprocessed
          this.processed = res.processed
        })
        getTypeCount().then(res => {
          if (res.success) {
            this.typeCount = res.data
            this.updateHis()
          }
        })
      },
      // 饼图
      initPie () {
        const mypie = document.querySelector('#errorProportion')
        myPie = echarts.init(mypie, null, { renderer: 'svg' })
      },
      updatePie () {
        const option = {
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['60%', '76%'],
              itemStyle: {
                borderRadius: 0,
                borderColor: '#0e292c',
                borderWidth: 5
              },
              avoidLabelOverlap: false,
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              data: [
                {
                  value: this.unprocessed,
                  name: '未处理故障',
                  itemStyle: {
                    // color: '#2EADD9'
                    color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
                      { offset: 0, color: '#30DCD2' },
                      { offset: 0.3, color: '#2FC1D6' },
                      { offset: 0.6, color: '#2C89DF' },
                      { offset: 1, color: '#2EAFD9' }
                    ])
                  }
                },
                {
                  value: this.processed,
                  name: '已处理故障',
                  itemStyle: {
                    // color: '#FFB866'
                    color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
                      { offset: 0, color: '#FD3F50' },
                      { offset: 0.3, color: '#FE7359' },
                      { offset: 0.6, color: '#FFB165' },
                      { offset: 1, color: '#FFB866' }
                    ])
                  }
                }
              ]
            }
          ]
        }
        option && myPie.setOption(option)
        window.addEventListener('resize', function () {
          myPie.resize()
        })
      },
      // 折线图
      initLine () {
        const myline = document.querySelector('.line')
        myLine = echarts.init(myline, null, { renderer: 'svg' })
      },
      updateLine () {
        getErrorCountByMonth({ stationId: this.stationId }).then(res => {
          if (res.success) {
            for (let i = 0; i < res.data.length; i++) {
              this.allMonthErrorList[res.data[i].monthDay - 1] = res.data[i].errCount
              const option = {
                tooltip: {
                  trigger: 'axis'
                },
                grid: {
                  top: 30,
                  left: 60,
                  right: 30,
                  bottom: 40
                },
                xAxis: [
                  {
                    show: true,
                    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {
                      show: false,
                      lineStyle: {
                        color: '#fff',
                        width: 1
                      }
                    },
                    axisLabel: {
                      fontSize: 12
                    },
                    // 竖线线
                    splitLine: {
                      show: false
                    }
                  }
                ],
                yAxis: [
                  {
                    show: true,
                    type: 'value',
                    lineStyle: {
                      show: false,
                      color: '#fff'
                    },
                    // 横线
                    splitLine: {
                      show: true,
                      lineStyle: {
                        color: '#0c2e36',
                        type: 'dashed'
                      }
                    },
                    axisLine: {
                      lineStyle: {
                        show: true,
                        color: '#fff',
                        width: 1
                      }
                    },
                    axisLabel: {
                      fontSize: 12
                    }
                  }
                ],
                series: [
                  {
                    type: 'line',
                    symbolSize: 0,
                    smooth: true,
                    lineStyle: {
                      color: '#0D5F5A'
                    },
                    areaStyle: {
                      color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
                        { offset: 0, color: '#101818' },
                        { offset: 0.3, color: '#0F2726' },
                        { offset: 0.6, color: '#0F4442' },
                        { offset: 1, color: '#0D5F5A' }
                      ])
                    },
                    data: this.allMonthErrorList
                  }
                ]
              }
              myLine.setOption(option)
              window.addEventListener('resize', function () {
                myLine.resize()
              })
            }
          }
        })
      },
      initHis () {
        const myhis = document.querySelector('#errorRank')
        myHis = echarts.init(myhis, null, { renderer: 'svg' })
      },
      updateHis () {
        const option = {
          legend: {
            show: false
          },
          grid: {
            top: 10,
            left: 94,
            right: 44,
            bottom: 11,
            containLabel: false
          },
          xAxis: {
            show: false
          },
          yAxis: {
            show: true,
            type: 'category',
            data: this.exceptionGroupX,
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              show: false
            }
          },
          series: [
            {
              type: 'bar',
              data: this.exceptionGroupY,
              label: {
                show: true,
                position: 'right',
                textStyle: {
                  color: '#fff',
                  fontWeight: 'normal'
                }
              },
              barWidth: '24%',
              showBackground: true,
              backgroundStyle: {
                color: '#021e54',
                borderRadius: 0
              },
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                  { offset: 0, color: '#3FEEFC' },
                  { offset: 0.3, color: '#72BBCE' },
                  { offset: 0.6, color: '#B37691' },
                  { offset: 1, color: '#FA2A4E' }
                ]),
                borderRadius: 5
              }
            }
          ]
        }
        option && myHis.setOption(option)
        window.addEventListener('resize', function () {
          myHis.resize()
        })
      },
      getDeviceList () {
        if (this.stationId !== 0) {
          gatewayList({ stationId: this.stationId }).then((res) => {
            this.gatewayCount = res.data.length
          })
          getChannelCount({ stationId: this.stationId }).then(res => {
            this.channelCount = res.data
          })

          getExceptionCountByStationId({ stationId: this.stationId }).then(res => {
            if (res.success) {
              this.exceptionGroupX = res.data.exceptionGroupX
              this.exceptionGroupY = res.data.exceptionGroupY
              // this.updateMyChart()
              this.updateHis()
            }
          })
          getFaultRate().then(res => {
            this.faultRate = res.data
            if (res.data > 100) {
              this.faultRate = 100
            }
          })
        }
      }
    },
    mounted () {
      this.initHis()
      this.getStatusCount()
      this.initPie()
      this.updatePie()
      this.initLine()
      this.updateLine()
      this.initHis()
      window.onresize = () => {
        return (() => {
          myPie.resize()
          myLine.resize()
          myHis.resize()
        })()
      }
    }
  }
</script>

<style scoped="scoped" lang="scss">
  @import "../../../assets/scss/index.scss";

  .temp {
    height: 0;
    margin-bottom: 0;
    border: none;
    padding: 0;
  }
</style>
